<template>
 <div id="demo">
  <div class='demotop'>
  <el-form :inline="true"   size="mini" class="demo-form-inline">
     <!--试卷名称-->
    <el-form-item label="试卷名称">
        <el-input v-model="paperTitle" placeholder="请输入试卷名称"></el-input>
     </el-form-item>
     <!--日期-->
      <el-form-item label="日期">
       <el-date-picker
          v-model="selTime"
          type="daterange"
          range-separator="-"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
     </el-form-item>
     <!--考试类型-->
      <el-form-item label="考试类型">
            <el-select v-model="examType" placeholder="请选择"  @change="selsectexamType" multiple>
              <el-option
                v-for="item in optionsexamType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
        </el-select>
     </el-form-item>
      <!--所属学科-->
      <el-form-item label="所属学科">
          <el-select v-model="subject" placeholder="请选择"  @change="selsectsubject" multiple>
              <el-option
                v-for="item in optionssubject"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
        </el-select>
     </el-form-item>
     <!--学段-->
      <el-form-item label="学段">
          <el-select v-model="level" placeholder="请选择" @change="selsectlevel" multiple>
              <el-option
                v-for="item in optionslevel"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
        </el-select>
     </el-form-item>
   <!--地区-->
      <el-form-item label="地区">
                <el-select
                  v-model="address"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入地区"
                  :remote-method="remoteMethod"
                  @change="selsectTecher"
                  multiple
                  >
                 <el-option
                    v-for="item in options4"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>       
     </el-form-item>
      <!--试卷类型-->
      <el-form-item label="试卷类型">
          <el-select v-model="paperType" placeholder="请选择" @change="selsectpaperType" >
              <el-option
                v-for="item in optionspaperType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
        </el-select>
     </el-form-item>
     <!--试卷状态-->
          <el-form-item label="试卷状态">
            <el-select v-model="paperStatus" placeholder="请选择"  @change="selsectpaperStatus">
                <el-option
                  v-for="item in optionspaperStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="抽检状态">
          <el-select v-model="qualifiedStatus" clearable>
            <el-option label="未抽检" value="0" />
            <el-option label="抽检中" value="1" />
            <el-option label="不合格" value="2" />
            <el-option label="合格" value="3" />
          </el-select>
        </el-form-item> 
     <!--年份-->
      <el-form-item label="年份">
          <el-date-picker @change='changeYear'  value-format="yyyy"
            v-model="yearsData"
            type="year"
            placeholder="选择年">
          </el-date-picker>
     </el-form-item>
        <!--年份-->
      <el-form-item label="是否公开">
         <el-select v-model="isPublicID" placeholder="请选择"  @change="selsectisPublic">
              <el-option
                v-for="item in optionsisPublic"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
        </el-select>
     </el-form-item>
      <el-form-item>
          <el-button type="primary"  size="mini" @click='onserch' >查询</el-button>
           <el-button
            size="mini"
            icon="el-icon-refresh-right" @click='regest' >重置</el-button>
        </el-form-item>

  </el-form>         
     </div>
           <!--上线下线到处-->
           <div class='SJlogoout'>
           <el-button-group>
            <el-button @click="getAll(1)" type="primary" size='mini' icon="el-icon-caret-top">上线</el-button>
            <el-button @click="getAll(0)"  type="primary"  size='mini'  icon="el-icon-caret-bottom">下线</el-button>
             <!--<el-button type="primary" icon="el-icon-folder-opened">导出试卷</el-button>-->
          </el-button-group>
           </div>
          <!--表单-->
          <div style='margin:30px;'>
            <el-table
                  ref="multipleTable"
                  :data="arr"
                  tooltip-effect="dark"
                  style="width: 100%"
                  border
                  @selection-change="handleSelectionChange">
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    label="试卷ID"
                    width="80">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                  </el-table-column>
                  <el-table-column
                    prop=""
                    label="试卷名称"
                    width="300"
                    show-overflow-tooltip>
                     <template slot-scope="scope">{{ scope.row.title }}</template>
                  </el-table-column>
                  <el-table-column
                    prop="typeInfo"
                    label="试卷结构"
                    >
                    
                  </el-table-column>
                   <el-table-column
                    prop="exaType"
                    label="考试类型"
                   >
                   
                  </el-table-column>
                   <el-table-column
                    prop=""
                    label="创建时间"
                    >
                     <template slot-scope="scope">{{ scope.row.ctime  | dateFormat }}</template>
                  </el-table-column>
                   <el-table-column
                    prop=""
                    label="试卷状态"
                   >
                    <template slot-scope="scope">
                      <el-tag type="info" v-if="scope.row.status==0">{{scope.row.editPeople}}-编辑中</el-tag>
                      <el-tag v-if="scope.row.status==1">上线</el-tag>
                      <el-tag type="danger" v-if="scope.row.status==2">下线</el-tag>
                      <el-tag type="warning" v-if="scope.row.status==3">{{scope.row.checkPeople}}-校验中</el-tag>
                      <el-tag v-if="scope.row.status==4">{{scope.row.reviewPeople}}-审核中</el-tag>
                      <el-tag type="success" v-if="scope.row.status==5">已审核</el-tag>
                    </template>                   
                  </el-table-column>
                  <el-table-column
                    prop=""
                    label="抽检状态"
                   >
                    <template slot-scope="scope">
                      <el-tag type="info" v-if="scope.row.qualifiedStatus==0">未抽检</el-tag>
                      <el-tag v-if="scope.row.qualifiedStatus==1">抽检中</el-tag>
                      <el-tag type="danger" v-if="scope.row.qualifiedStatus==2">不合格</el-tag>
                      <el-tag type="success" v-if="scope.row.qualifiedStatus==3">合格</el-tag>
                    </template>                   
                  </el-table-column>
                   <el-table-column
                    prop="editPeople"
                    label="编辑人"
                   >
                              
                  </el-table-column>
                  
                   <el-table-column
                      v-if="activeName==='1'"
                      class-name="status-col"
                      align="center"
                      label="编辑状态"
                      width="110px"
                    >
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.editStatus===0" type="info">暂存</el-tag>
                        <el-tag v-else-if="scope.row.editStatus===1" type="success">已提交</el-tag>
                        <el-tag v-else type="danger">驳回</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column
                      v-else-if="activeName==='2'"
                      class-name="status-col"
                      align="center"
                      label="校验状态"
                      width="110px"
                    >
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.checkStatus===0" type="info">暂存</el-tag>
                        <el-tag v-else-if="scope.row.checkStatus===1" type="success">已提交</el-tag>
                        <el-tag v-else type="danger">驳回</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column
                      v-else-if="activeName==='3'"
                      class-name="status-col"
                      align="center"
                      label="审核状态"
                      width="110px"
                    >
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.reviewStatus===0" type="info">暂存</el-tag>
                        <el-tag v-else-if="scope.row.reviewStatus===1" type="success">已提交</el-tag>
                        <el-tag v-else type="danger">驳回</el-tag>
                      </template>
                    </el-table-column>
                     <el-table-column align="center"
                      prop=""
                      label="上线状态"
                    >
                     <template slot-scope="scope">
                        <el-tag v-if="scope.row.onlineStatus===0" type="info">下线</el-tag>
                        <el-tag v-if="scope.row.onlineStatus===1" type="success">上线</el-tag>
                      
                      </template>
                    </el-table-column>
                   <el-table-column
                    prop="editPeople"
                    label="编辑人"
                   >
                  </el-table-column>
                   <el-table-column
                    prop="checkPeople"
                    label="检查人"
                    >
                  </el-table-column>
                   <el-table-column
                    prop="reviewPeople"
                    label="审核人"
                    >
                  </el-table-column>
                    <el-table-column
                    prop=""
                    label="查看"
                    >
                     <template slot-scope="scope">
                       <router-link
                              :to="{
                                path:'/testInfo',
                                query:{
                                  id:scope.row.id
                                }
                              }"
                            >
                              <el-button type="primary" size="mini">查看</el-button>
                        </router-link>
                      </template>
                  </el-table-column>
                </el-table>
            </div>    
             <!--分页--> 
          <el-row class="page">
             <el-pagination background layout="prev, pager, next" :total="totals"  :current-page.sync="pageNo"
              :page-size="pageSize"  @current-change='currchange'></el-pagination>
         </el-row> 
         
        </div>
</template>
<script>
import { Loading } from 'element-ui';
import __Config from '../../api/config';//实际路径
export default {
  name: "SJget",
  data() {
    return {
    paperTitle:"",//试卷名称
    selTime:"",//时间
    examType:"",//考试类型
    subject:"",//所属学科
    level:"",//学段
    address:"",//地区
    paperType:"",//试卷类型
    paperStatus:'',//试卷状态
    qualifiedStatus:'',//抽检状态
    isPublic:"",//是否公开
    yearsData:"",//年费
    options4:[],//地区数组
    addresID:[],//地区ID
  
     arr:[],
     checked:false,
     tableData: [],
     subjectID:[],//所属学科ID     
     optionssubject:[],
     examTypeID:[],//考试类型ID     
     optionsexamType:[],
     levelID:[],//学断ID     
     optionslevel:[],
     paperTypeID:'',//试卷类型ID     
     optionspaperType:[],
     paperStatusID:"",//试卷状态ID     
     optionspaperStatus:[],
    
     optionsisPublic:[],
    isPublicID:"",
    pageNo:1,//页码
    pageSize:8,//数量
    totals:null,
    StarData:"",
    endData:"",
    multipleSelection: [],
    ids:[],////K选中题目ID的数组
    activeName:"1"
    };
  },
 
  created() {
      this.activeName = this.$store.getters.role === 1 ? '0' : '1'
    if (this.activeName === '1' && (this.$store.getters.permission & 1) <= 0) {
      this.activeName = '2'
    }
    if (this.activeName === '2' && (this.$store.getters.permission & 2) <= 0) {
      this.activeName = '3'
    }
   this.getcerch();
   this.onserch();
  },
  methods: {
    //试卷查询条件
    getcerch(){
      this.$axios({
              method:'get',
              url: __Config.api.getSJserch,
              headers: {
                'Authorization': this.$store.getters.token//设置token 其中K名要和后端协调好
              },
              params:{ }
              }).then((res)=>{     
                  this.optionssubject = res.data.data.subject;
                  this.optionsexamType = res.data.data.examType;
                  this.optionslevel = res.data.data.level;
                  this.optionspaperType = res.data.data.paperType;
                  this.optionspaperStatus = res.data.data.paperStatus;
                  this.optionsisPublic = res.data.data.isPublic;
              }).catch((err)=>{
                  console.log(err)
              })
    },
     //地区查询
          remoteMethod(query) {  
         
            this.$axios({
              method:'get',
              url: __Config.api.getAddress,
              headers: {
                'Authorization': this.$store.getters.token//设置token 其中K名要和后端协调好
              },
              params:{
                  name:query
              }
              }).then((res)=>{
                   this.options4=res.data.data;
              }).catch((err)=>{
                   this.$message({
                    message: err,
                   type: 'warning'
                 });
              })

          },
       //地区选择
        selsectTecher(event){
          this.addresID=event;
       
        },
         //所属学科选择
         selsectsubject(event){this.subjectID = event; },
         //考试类ixng选择
         selsectexamType(event){ this.examTypeID = event;},
        //学断选择
         selsectlevel(event){ this.levelID = event;},
        //试卷类型选择
         selsectpaperType(event){ this.paperTypeID = event;},
          //试卷状态选择
         selsectpaperStatus(event){ this.paperStatusID = event;},          
        //是否公开选择
         selsectisPublic(event){ this.isPublicID = event;},

         //年份选择
         changeYear(event){
          // alert(event);
         },

          //查询
        onserch(){
         let options={
             background:"rgba(0, 0, 0, 0.8)",
             text:"加载中"
           }
           let loadingInstance = Loading.service(options);
         if(this.selTime==null){
           this.selTime= [];
           this.StarData="";
           this.endData="";
         }else{
           var times = this.selTime;
           this.StarData  = times[0];
           this.endData = times[1];
         }
       
           this.$axios({
              method:'post',
              url: __Config.api.getSJDdata,
              headers: {
                "Content-Type":"application/json;",
                'Authorization': this.$store.getters.token//设置token 其中K名要和后端协调好
              },
              params:{
                    pageNo:this.pageNo,
                    pageSize:this.pageSize,
              },
              data:{
                startTime:this.StarData,
                endTime:this.endData,
                subject:this.subjectID,
                examType:this.examTypeID,
                level:this.levelID,
                area:this.addresID,
                paperStatus:this.paperStatus,
                paperType:this.paperTypeID,//试卷类型
                year:this.yearsData,
                isPublic:this.isPublicID,
                paperTitle:this.paperTitle,
                qualifiedStatus:this.qualifiedStatus
              }
              }).then((res)=>{
                   //console.log(res);
                     loadingInstance.close();
                   this.arr = res.data.data;
                   this.totals = res.data.page.total;
              }).catch((err)=>{
                  loadingInstance.close();
                  this.$message({
                  message: err,
                  type: 'warning'
                });
              })

        },
         currchange(e){
                this.pageNo=e;
                this.onserch();
            },

         //多选单选 
         handleSelectionChange(val){
             this.multipleSelection= val;
          },
     
         //上架 //getSJshangjia
         getAll(type){
           if(this.multipleSelection.length==0){
              this.$message({
                  message: "至少选择一行数据",
                  type: 'warning'
                });
           }else{ 
            let options={
             background:"rgba(0, 0, 0, 0.8)",
             text:"加载中"
           }
           let loadingInstance = Loading.service(options);
           this.ids=   this.multipleSelection.map(function(item) {
                 return item.id
            })
             var arr= this.ids.toString();
             let idss = arr.replace(/\[|]/g,'');//移除字符串中的所有[]括号
             this.$axios({
              method:'post',
              url: __Config.api.getSJshangjia,
              headers: {
                'Authorization':this.$store.getters.token,
              },
              params:{
                paperId:idss,
                type:type
              }
              }).then((res)=>{
               
                loadingInstance.close();
                this.$message({
                message: res.data.msg,
                type: 'success'
              });
               this.onserch();
              }).catch((err)=>{
                 loadingInstance.close();
                 this.$message({
                  message: err.response.data.msg,
                  type: 'warning'
                });
              })
           }
         },
       //重置
       regest(){
         this.paperTitle="";this.selTime=[];this.examType=""; this.level=[];this.level="";this.yearsData="";this.isPublicID="";this.paperType="";this.subject=[];this.paperStatus='';this.qualifiedStatus='';this.onserch();
       }
  
  }
};
</script>

<style >
#demo{
  font-size:14px;
}
.thead{
  display:flex;
  width:95%;
  margin:20px auto 0px auto;
  border:1px solid #DCDFE6;
   height: 40px;
  overflow: hidden;
}
.thd{
    border-right:1px solid #DCDFE6;
 
    line-height: 40px;
    text-align: center;
}
.lsthd{
   height: 40px;
    line-height: 40px;
    text-align: center;
}
.dataliat{
  
}
.list{
 display:flex;
 
    width:95%;
    margin:0px auto;
    border:1px solid #DCDFE6;
    border-top:0x;
    background:#fff;
}
.content{
     width:95%;
     margin:10px auto;
}
.cell{
  text-align:center
}
.demotop{
  width:95%;
  margin:20px auto;
}
.paperTitle{
  width:90px;
  line-height:40px;
  display:block;
}
.SJlogoout{
   width:95%;
   margin:10px auto;
}
.mr30{
  margin-top:30px;
}
.page{
  margin:30px;
}
</style>